<template>
	<view class="order">
		<view class="item" v-for="item in dataSource.orderList" :key="item._id">
			<view class="hd">
				<text>订单编号：{{ item._id }}</text>
				<text>{{ item.orderStatus }}</text>
			</view>
			<view class="info">
				<image :src="IMG_URL + item.goodsImg" mode="widthFix"></image>
				<view class="main">
					<view class="">{{ item.goodsName }}</view>
					<view class="">颜色：{{ item.goodsColor }}</view>
					<view class="">数量：{{ item.goodsCount }}</view>
					<view class="">
						单价：
						<text>￥{{ item.goodsPrice }}.00</text>
						元
					</view>
				</view>
			</view>
			<view class="footer">
				<text>{{ formatDate(item.createTime) }}</text>
				<text>合计：￥{{ item.orderTotal }}.00</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue"
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		BASE_URL,
		IMG_URL
	} from "@/config/index.js"

	const dataSource = reactive({
		orderList: []
	})

	const getList = () => {
		const {
			token
		} = uni.getStorageSync('USER_TOKENS') || {}
		uni.showLoading({
			title: '加载中.',
			mask: true
		})
		uni.request({
			url: `${BASE_URL}order`,
			method: 'GET',
			header: {
				Authorization: `bearer ${token}`
			},
			success: (res) => {
				const {
					data
				} = res.data;
				dataSource.orderList = [data]
			},
			complete: () => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}
		})
	}

	const formatDate = (date) => {
		const myDate = new Date(date);
		const y = myDate.getFullYear();
		const mo = myDate.getMonth() + 1;
		const d = myDate.getDate();
		const h = myDate.getHours();
		const m = myDate.getMinutes();
		const s = myDate.getSeconds();
		return y + '-' + mo + '-' + d + ' ' + h.toString().padStart(2, '0') + ':' + m.toString().padStart(2, '0') +
			':' + s.toString().padStart(2, '0');
	}

	onShow(() => {
		const {
			token
		} = uni.getStorageSync('USER_TOKENS') || {}
		if (!token) {
			uni.redirectTo({
				url: '/pages/otherPages/login'
			})
			return
		}
		getList()
	})

	onLoad(() => {
		getList()
	})

	onPullDownRefresh(() => {
		getList()
	})
</script>

<style lang="scss" scoped>
	.item {
		margin-bottom: 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #666;

		.hd {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #fafafa;
			padding: 15rpx 20rpx;
			background: #fff;

			text:last-child {
				color: #ffaa00;
			}
		}

		.info {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			background: #f0f0f0;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;

			.main {
				flex: 1;
				margin-left: 20rpx;
				line-height: 1.8;

				view:last-child text {
					color: red;
				}
			}

			image {
				width: 220rpx;
				height: 200rpx !important;
				border: 1rpx solid #efefef;
			}
		}

		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 15rpx 20rpx;
			background: #fafafa;
			border-bottom: 1rpx solid #e0e0e0;

			text:last-child {
				color: red;
			}
		}
	}
</style>